﻿.fui-ListGroup {
    display: flex;
    flex-direction: column;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-top: 0px;
    border-radius: var(--borderRadiusMedium);

    &.fui-ListGroup-scrollable {
        overflow-y: scroll;
    }
}

.fui-ListGroupItem {
    position: relative;
    display: block;
    padding-left: var(--spacingHorizontalM);
    padding-right: var(--spacingHorizontalM);
    padding-top: var(--spacingVerticalM);
    padding-bottom: var(--spacingVerticalM);
    border: 1px solid var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground1);

    &:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }

    &:last-child {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
    }

    &.fui-ListGroupItem-action {
        &:hover,
        &:focus {
            z-index: 1;
            cursor: pointer;
            background-color: var(--colorNeutralBackground3Hover);
        }

        &.fui-ListGroupItem-active {
            color: var(--colorNeutralForegroundOnBrand);
            background-color: var(--colorBrandBackground);
        }
    }

    &.fui-ListGroupItem-disabled,
    &:disabled {
        color: var(--colorNeutralForegroundDisabled);
        cursor: not-allowed;
    }

    & + & {
        border-top-width: 0;
    }

    &-primary {
        background-color: var(--colorBrandBackground2);
        color: var(--colorBrandForeground2);

        &.fui-ListGroupItem-action {
            &:hover,
            &:focus {
                background-color: var(--colorBrandBackground2Hover);
            }

            &.fui-ListGroupItem-active {
                background-color: var(--colorBrandBackground2Pressed);
            }
        }
    }

    &-secondary {
        background-color: var(--colorNeutralBackground3);
        color: var(--colorNeutralForeground3);

        &.fui-ListGroupItem-action {
            &:hover,
            &:focus {
                background-color: var(--colorNeutralBackground3Hover);
            }

            &.fui-ListGroupItem-active {
                color: var(--colorNeutralForeground3);
                background-color: var(--colorNeutralBackground3Selected);
            }
        }
    }

    &-success {
        background-color: var(--colorStatusSuccessBackground1);
        color: var(--colorStatusSuccessForeground1);

        &.fui-ListGroupItem-action {
            &:hover,
            &:focus {
                background-color: var(--colorStatusSuccessBackground2);
            }

            &.fui-ListGroupItem-active {
                color: var(--colorStatusSuccessBackground1);
                background-color: var(--colorStatusSuccessBackground3);
            }
        }
    }

    &-danger {
        background-color: var(--colorStatusDangerBackground1);
        color: var(--colorStatusDangerForeground1);

        &.fui-ListGroupItem-action {
            &:hover,
            &:focus {
                background-color: var(--colorStatusDangerBackground2);
            }

            &.fui-ListGroupItem-active {
                color: var(--colorStatusDangerBackground1);
                background-color: var(--colorStatusDangerBackground3);
            }
        }
    }

    &-warning {
        background-color: var(--colorStatusWarningBackground1);
        color: var(--colorStatusWarningForeground3);

        &.fui-ListGroupItem-action {
            &:hover,
            &:focus {
                background-color: var(--colorStatusWarningBackground2);
            }

            &.fui-ListGroupItem-active {
                color: var(--colorStatusWarningBackground1);
                background-color: var(--colorStatusWarningBackground3);
            }
        }
    }

    &-info {
    }

    &-light {
        background-color: var(--colorNeutralBackground1);

        &.fui-ListGroupItem-action {
            &:hover,
            &:focus {
                background-color: var(--colorNeutralBackground1Hover);
            }

            &.fui-ListGroupItem-active {
                color: var(--colorNeutralForeground3);
                background-color: var(--colorNeutralBackground1Selected);
            }
        }
    }

    &-dark {
        background-color: var(--colorNeutralForeground3);
        color: var(--colorNeutralBackground1);

        &.fui-ListGroupItem-action {
            &:hover,
            &:focus {
                background-color: var(--colorNeutralForeground3Hover);
            }

            &.fui-ListGroupItem-active {
                color: var(--colorNeutralForegroundInverted);
                background-color: var(--colorNeutralForeground3Selected);
            }
        }
    }

    &-link {
        background-color: var(--colorTransparentBackground);
        color: var(--colorBrandForegroundLink);

        &.fui-ListGroupItem-action {
            &:hover,
            &:focus {
                color: var(--colorBrandForegroundLinkHover);
            }

            &.fui-ListGroupItem-active {
                color: var(--colorBrandForegroundLinkSelected);
            }
        }
    }
}


.fui-ListGroup-flush {
    border-radius: 0;

    > .fui-ListGroupItem {
        border-radius: 0;
        border-width: 0 0 var(--strokeWidthThin);

        &:last-child {
            border-bottom-width: 0;
        }
    }
}
